<template>
  <div class="barChart">
    <div class="barTitle">活动数量年度变化</div>
    <div class="acManageBarChart" ref="bar_chart"></div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      myChart: null,
      allData: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 初始化实例对象
    initChart() {
      this.myChart = this.$ECharts.init(this.$refs.bar_chart)
      this.getData()
    },
    // 获取服务器的数据
    getData() {
      // const {data:ret} = await this.$http.get('')
      // this.allData = ret
      console.log(1312)
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      let dataAxis = [
        '点',
        '击',
        '柱',
        '子',
        '或',
        '者',
        '两',
        '指',
        '在',
        '触',
        '屏',
        '上',
        '滑',
        '动',
        '能',
        '够',
        '自',
        '动',
        '缩',
        '放'
      ]
      // prettier-ignore
      let data = [135, 221, 398, 548, 798, 1008];
      let yMax = 500
      let dataShadow = []
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
      }
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '成员人数 <br/>{b} : {c} (人)'
        },
        xAxis: {
          data: [2016, 2017, 2018, 2019, 2020, 2021],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: { color: '#fff' },
            fontSize: 8
          },
          z: 10
        },
        yAxis: [
          {
            type: 'value',
            name: '（数量/次）',
            nameTextStyle: {
              color: 'rgba(233,233,233,.7)',
              fontSize: 9,
              padding: [0, 0, 0, -30] // 上右下左与原位置距离
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 8,
              interval: 0
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#a13f3f',
                type: 'dashed' //虚线
                // width: 2
              }
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        grid: {
          left: '20',
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(137, 2, 2, 0.32)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#878150' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              itemStyle: {
                color: this.$ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: data
          },
          {
            data: data /* 这里要和第一组数据一样、才能保持在最高处*/,
            type: 'line',
            symbol: 'circle', //拐点样式
            symbolSize: 4, //拐点大小
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, //折线宽度
                  color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#c5791b' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#3bd5c0' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
                color: '#27dba0', //拐点颜色
                borderColor: '#fff', //拐点边框颜色
                borderWidth: 2 //拐点边框大小
              },
              emphasis: {
                color: '#4CCEFE' //hover拐点颜色定义
              }
            }
          }
        ]
      }
      // Enable data zoom when user click bar.
      const zoomSize = 6
      this.myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        this.myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        })
      })
      this.myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.barChart {
  .barTitle {
    color: #fff;
    font-size: 0.375rem;
    font-weight: 900;
    font-family: monospace;
    background-color: rgb(182, 1, 1);
    height: 0.625rem;
    line-height: 0.625rem;
    padding-left: 0.25rem;
  }
  .acManageBarChart {
    width: 100%;
    height: 6rem;
    margin-top: -25px;
    overflow: hidden;
  }
}
</style>
